[アップデート] Amazon Cognito で「マネージドログイン」機能が導入され、ログインメニューのブランディングのカスタマイズが可能となりました

#Amazon Cognito
#AWS
若槻龍太
2024.11.24
（2024/11/25 追記）
こんにちは、製造ビジネステクノロジー部の若槻です。
Amazon Cognito のアップデートで マネージドログイン 機能が導入され、ログインメニューのブランディングのカスタマイズが可能となりました。

https://aws.amazon.com/about-aws/whats-new/2024/11/amazon-cognito-managed-login/
今まではログインメニューにサービスのロゴを表示したりカラーリングを会社のブランディングに合わせたりしたい場合は、フロントエンド側の実装対応を行う必要がありました。この仕様により実装工数が嵩んだり、泣く泣く Cognito 以外の認証サービスを選択するケースも多かったのではないでしょうか。
それが今回のアップデートにより、マネジメントコンソールからデザイナーを使って柔軟なカスタマイズが可能となりました。機能のドキュメントは下記となります。

https://docs.aws.amazon.com/cognito/latest/developerguide/managed-login-brandingdesigner.html
 試してみた実際に Cognito のマネージドログイン機能を試してみます。
 必要なリソースの準備まず必要なリソースとして User pool、Domain および Client を準備します。マネジメントコンソールから作成しても良いのですが今回は AWS CDK で作成しました。
lib/main-stack.ts
import * as cdk from 'aws-cdk-lib';
import * as cognito from 'aws-cdk-lib/aws-cognito';
import { Construct } from 'constructs';

export class MainStack extends cdk.Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    const COGNITO_DOMAIN_PREFIX = 'cm-test-20241124';
    const URLS = ['https://dev.classmethod.jp/'];
    const TEST_USER_EMAIL_ADDRESS = process.env.TEST_USER_EMAIL_ADDRESS || '';

    /**
     * Cognito User Pool
     */
    const userPool = new cognito.UserPool(this, 'UserPool', {
      selfSignUpEnabled: true,
      signInAliases: {
        email: true,
      },
      autoVerify: {
        email: true,
      },
    });

    /**
     * Cognito User Pool Domain
     */
    userPool.addDomain('UserPoolDomain', {
      cognitoDomain: { domainPrefix: COGNITO_DOMAIN_PREFIX },
    });

    /**
     * Cognito User Pool Client
     */
    userPool.addClient('UserPoolClient', {
      generateSecret: false,
      oAuth: {
        callbackUrls: URLS,
        logoutUrls: URLS,
        flows: { authorizationCodeGrant: true },
      },
    });

    /**
     * Cognito User Pool User
     * 動作確認用のユーザーを作成
     */
    const userPoolUser = new cognito.CfnUserPoolUser(this, 'UserPoolUser', {
      userPoolId: userPool.userPoolId,
      username: TEST_USER_EMAIL_ADDRESS,
    });
    userPoolUser.node.addDependency(userPool);
  }
}
 ブランディングバージョン設定をマネージドログインに変更ブランディングバージョンの設定は Cognito Domain ごとに行います。
作成直後の Cognito Domain ではブランディングバージョンは Hosted UI が選択されています。[Edit cognito domain branding version] にアクセスします。

バージョンの選択を Managed login に変更して保存します。

ブランディングバージョンが Managed login となりました。

 スタイルの作成User pool の Managed login メニューが利用可能になっているのでアクセスします。スタイルの作成を開始します。

App client を選択して、作成に進みます。

スタイルが作成されました。

App client のメニューからログインページを開いてみます。

新スタイルのサインインメニューとなっていますね。

サインアップとパスワードリセットメニューも同様に新スタイルとなっています。



 スタイルのカスタマイズスタイルをカスタマイズしたい場合は、スタイルの [Launch branding designer] からブランディングデザイナーにアクセスします。

ブランディングデザイナーが開きました。ここで色々カスタマイズできそうです。

[Display mode] でライトモード/ダークモードを変更できます。

[Spacing] でログインメニューの上下のスペースを狭くしてコンパクトな表示にできます。

[Page background image] で背景画像を変更できます。

[Background type] および [Page background color] で背景画像を表示するか指定の背景色のみを表示するか設定できます。

[Horizontal alignment] でログインメニューの水平位置を変更できます。

[Form logo] で任意のロゴを表示するか、表示する場合はログインメニューの内部と外部のいずれかに表示するかを設定できます。

アップロードできるロゴファイルには次の制限があり、満たしていない場合はエラーとなります。
Width/height ratio between 1:1 and 4:1
Maximum size: 500KB
File types accepted: .jpg .jpeg .png .webp, .svg
フッター及びヘッダーにも同様に画像ファイルを設定することができます。



ロゴファイルとしてサイズ 600 × 188、解像度 13 × 13 の png ファイルを設定してみます。

設定されました。少し小さい気がしますが縦または横いっぱいまで自動拡大などはされないためでしょうか。今回は適当な画像を用意したため、実際には適切なサイズの画像を用意した方が良さそうです。

[Primary branding color] および [Primary button label color] でログインメニューのボタンの背景色や文字色を変更できます。

デザイナー下部の [Preview controls]からプレビューの種類を変更できます。

プレビューするページや端末の種類およびサイズを選択できます。

スマートフォン端末で MFA オプションメニューを表示した様子です。

さてここまでは Quick setup というメニューで変更を行ってきましたが、さらに詳細なカスタマイズを行う場合は Settings menu から設定メニューを切り替えます。

Components では各コンポーネントごとの詳細なスタイルを変更できます。

ボタン
区切り線
ファビコン
フォーカス時の状態
フォームコンテナ
インディケーター
オプションコントロール
ページ背景
入力フィールド
リンク
ページ上のテキスト
フィールド上のテキスト
上記を設定すればかなり細かいところまでブランディングを行き届かせることができそうですね。
カスタマイズが完了したら、変更の自動保存はされないので、上部の保存ボタンで忘れずにセーブしましょう。

ロゴ画像とボタンの背景色を変更するカスタマイズを行ったログインページがこちらです。クラスメソッドの何らかのサービス向けのログインページなんだなーというのが一発で分かる見た目とすることができました。

 メニュー上の表記の言語指定（2024/11/25 追記）デフォルトの言語は英語になりますが、ログインページのクエリパラメーターで lang を指定することによって言語指定はできるようです。例えば下記のように lang=ja を付加することによりメニュー上の表記を日本語とすることができました。
https://cm-test-20241124.auth.ap-northeast-1.amazoncognito.com/login?lang=ja&...
サインインからサインアップメニューなどメニュー上のリンクから遷移した場合でも言語設定はもちろん引き継がれます。

アプリケーションからこのサインインメニューにリダイレクトする実装をする場合は、lang パラメーターの指定を忘れずに行いたいですね。
 注意点 デフォルト言語の設定はまだできなさそう残念ながらログインメニュー上に表示されるテキストの言語を既定の英語から変更する設定はマネジメントコンソールからもドキュメントからも見つけられませんでした。
テキスト内容自体の変更もできず、現状可能なのは下記のメニューから行うテキストのスタイルの変更のみです。

英語圏以外のユーザーにとっては自国の言語で表示されることが望ましいので、本部分の改善は切に望まれますね。 （2024/11/25 追記）ただし、前述の通りクエリパラメーターでの言語指定はできるので、多くのケースでは問題とはならないと思われます。
 スタイルのバックアップや別環境への適用は API を使うべき？私が見逃しているだけの可能性がありますが、マネジメントコンソールでは次のメニューが見当たりませんでした。
スタイルのインポート/エクスポート
スタイルのバージョン管理
また一つの App client に対して複数のスタイルを作成して、差し替えて使うということもできないようです。すでに他のスタイルが関連づいている場合は、追加のスタイルを作成しようとするとエラーとなります。

ただし AWS CLI の cognito-idp コマンド には次のサブコマンドが追加されていました。少なくとも API レベルでは可能となっているようです。
create-managed-login-branding
delete-managed-login-branding
describe-managed-login-branding
describe-managed-login-branding-by-client
update-managed-login-branding
よって、そのうち CloudFormation や AWS CDK でもサポートされるようになるのではないでしょうか。
 利用可能な Tier は Essentials または Plus のみマネージドログイン機能が利用可能な Tier は、下記ブログの通り Essentials または Plus のみです。
https://dev.classmethod.jp/articles/amazon-cognito-user-pools-feature-tiers/
既存の User pool は Lite または Lite + ASF に自動移行されるので、マネージドログイン機能を利用したい場合は Tier を手動で Essentials または Plus に変更する必要があります。
 おわりにAmazon Cognito のサービスアップデートで マネージドログイン機能が導入され、ログインメニューのブランディングのカスタマイズが可能となったのでご紹介しました。
今回デザイナーを中心にいろいろ触ってみましたが、他にも様々なメニューが追加されており、全部は紹介しきれませんでした。
機能プランやパスワードレスログインなど Cognito の大きなアップデートが続いていますが、これが最も認証サービスとしての Cognito に望まれていた機能ではないでしょうか。あと一歩な点もあるので引き続き今後のアップデートに期待したいと思います。
以上